[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import { Toaster } from "@/components/ui/toaster" import { CartProvider } from "@/components/cart-provider" import { WishlistProvider } from "@/components/wishlist-provider" import type React from "react" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "FINVIA Shopping Store", description: "Your one-stop shop for all your needs", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/site-header.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import Link from "next/link" import { ShoppingCart, Heart, Menu, Star, UserCircle2, PenIcon as Pants, BabyIcon } from "lucide-react" import { Button } from "@/components/ui/button" import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetTrigger } from "@/components/ui/sheet" import { useCart } from "./cart-provider" import { useState } from "react" import { SearchDialog } from "./search-dialog" import { Separator } from "@/components/ui/separator" import { cn } from "@/lib/utils" import { PackageIcon } from "lucide-react" const categories = [ { name: "Men's Clothing", href: "/category/mens-clothing", icon: UserCircle2 }, { name: "Women's Clothing", href: "/category/womens-clothing", icon: () => ( ), }, { name: "Kids Wear", href: "/category/kids-wear", icon: BabyIcon }, { name: "Combo Offers", href: "/category/combo", icon: PackageIcon }, { name: "Hoodies", href: "/category/hoodies", icon: () => ( ), }, { name: "Track Pants", href: "/category/track-pants", icon: Pants }, ] export function SiteHeader() { const { cartItems } = useCart() const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const [isSearchExpanded, setIsSearchExpanded] = useState(false) return (

Menu Browse categories and more

Welcome to FINVIA Store

Discover our latest collection of premium products at amazing prices.

Shop by Category

{categories.map((category) => { const Icon = category.icon return (

{category.name} {category.description} ) })}

Top Sellers

{topSellers.map((product) => ( ))}

Sale Items

{saleProducts.map((product) => ( ))}

) } [V0_FILE]typescriptreact:file="components/product-card.tsx" isEdit="true" isMerged="true" "use client" import Image from "next/image" import { Heart } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { useCart } from "./cart-provider" import { useWishlist } from "./wishlist-provider" import { Badge } from "./ui/badge" import type { Product } from "@/lib/products" interface ProductCardProps { product: Product } export function ProductCard({ product }: ProductCardProps) { const { addToCart } = useCart() const { addToWishlist, removeFromWishlist, isInWishlist } = useWishlist() const toggleWishlist = () => { if (isInWishlist(product.id)) { removeFromWishlist(product.id) } else { addToWishlist(product) } } return (

{product.isSale && ( Sale )} {product.isTopSeller && ( Top Seller )}

{product.name} {product.description}

${product.price.toFixed(2)}

{product.originalPrice && (

${product.originalPrice.toFixed(2)}

)}

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="lib/products.ts" isEdit="true" isDeleted="true" isUserEdit="true" ... deleted ... [V0_FILE]typescriptreact:file="app/category/[slug]/page.tsx" isMerged="true" import { SiteHeader } from "@/components/site-header" import { ProductCard } from "@/components/product-card" import { getProductsByCategory } from "@/lib/products" import { notFound } from "next/navigation" const categoryNames = { "mens-clothing": "Men's Clothing", "womens-clothing": "Women's Clothing", "kids-wear": "Kids Wear", combo: "Combo Offers", hoodies: "Hoodies", } export default function CategoryPage({ params, }: { params: { slug: string } }) { const products = getProductsByCategory(params.slug) const categoryName = categoryNames[params.slug as keyof typeof categoryNames] if (!categoryName) { notFound() } return (

{categoryName}

{products.length === 0 ? (

No products found in this category.

) : (

{products.map((product) => ( ))}

)}

) } [V0_FILE]typescriptreact:file="components/search-dialog.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Search } from "lucide-react" import { Button } from "@/components/ui/button" import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "@/components/ui/command" import { products } from "@/lib/products" import Image from "next/image" import { useRouter } from "next/navigation" import { cn } from "@/lib/utils" interface SearchDialogProps extends React.HTMLAttributes {} export function SearchDialog({ className, ...props }: SearchDialogProps) { const [open, setOpen] = useState(false) const router = useRouter() useEffect(() => { const down = (e: KeyboardEvent) => { if (e.key === "k" && (e.metaKey || e.ctrlKey)) { e.preventDefault() setOpen((open) => !open) } } document.addEventListener("keydown", down) return () => document.removeEventListener("keydown", down) }, []) return (

No results found. {products.map((product) => ( { router.push(`/category/${product.category}?product=${product.id}`) setOpen(false) }} >

{product.name}

${product.price}

))}

) } [V0_FILE]typescriptreact:file="components/auth/login-form.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardFooter, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useToast } from "@/components/ui/use-toast" export function LoginForm() { const [isLoading, setIsLoading] = useState(false) const { toast } = useToast() async function onSubmit(event: React.FormEvent) { event.preventDefault() setIsLoading(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) toast({ title: "Success", description: "You have been logged in successfully.", }) setIsLoading(false) } return ( Login Enter your email and password to access your account ) } [V0_FILE]typescriptreact:file="components/auth/register-form.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardFooter, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useToast } from "@/components/ui/use-toast" export function RegisterForm() { const [isLoading, setIsLoading] = useState(false) const { toast } = useToast() async function onSubmit(event: React.FormEvent) { event.preventDefault() setIsLoading(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) toast({ title: "Success", description: "Your account has been created successfully.", }) setIsLoading(false) } return ( Create an Account Enter your details to create a new account ) } [V0_FILE]typescriptreact:file="app/cart/page.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import { Minus, Plus, Trash2 } from "lucide-react" import { Button } from "@/components/ui/button" import { SiteHeader } from "@/components/site-header" import { useCart } from "@/components/cart-provider" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Separator } from "@/components/ui/separator" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" const categoryNames = { "mens-clothing": "Men's Clothing", "womens-clothing": "Women's Clothing", "kids-wear": "Kids Wear", combo: "Combo Offers", hoodies: "Hoodies", } export default function CartPage() { const { cartItems, removeFromCart, updateQuantity, clearCart } = useCart() const [isCheckingOut, setIsCheckingOut] = useState(false) const [address, setAddress] = useState({ fullName: "", streetAddress: "", city: "", state: "", zipCode: "", phone: "", }) const subtotal = cartItems.reduce((total, item) => total + item.price * item.quantity, 0) const shipping = 5.99 const total = subtotal + shipping // Group cart items by category const itemsByCategory = cartItems.reduce( (acc, item) => { const category = item.category if (!acc[category]) { acc[category] = [] } acc[category].push(item) return acc }, {} as Record, ) const handleCheckout = async () => { setIsCheckingOut(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 2000)) clearCart() setIsCheckingOut(false) } return (

Shopping Cart

{cartItems.length === 0 ? (

Your cart is empty

) : (

{Object.entries(itemsByCategory).map(([category, items]) => ( {categoryNames[category as keyof typeof categoryNames]} ({items.length})

{items.map((item) => (

{item.name}

${item.price.toFixed(2)}

{item.quantity}

))}

Order Summary

Subtotal ${subtotal.toFixed(2)}

Shipping ${shipping.toFixed(2)}

Total ${total.toFixed(2)}

Shipping Address

Full Name setAddress({ ...address, fullName: e.target.value })} />

Phone setAddress({ ...address, phone: e.target.value })} />

Street Address setAddress({ ...address, streetAddress: e.target.value })} />

City setAddress({ ...address, city: e.target.value })} />

State setAddress({ ...address, state: e.target.value })} />

ZIP Code setAddress({ ...address, zipCode: e.target.value })} />

)}

) } [V0_FILE]typescriptreact:file="app/account/page.tsx" isMerged="true" "use client" import { useState } from "react" import { SiteHeader } from "@/components/site-header" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export default function AccountPage() { const [profile, setProfile] = useState({ name: "John Doe", email: "john@example.com", phone: "+1 234 567 890", }) const orders = [ { id: "ORD001", date: "2024-02-10", status: "Delivered", total: 129.99, }, { id: "ORD002", date: "2024-02-08", status: "Processing", total: 79.99, }, ] return (

My Account

Profile Orders Addresses Profile Information Update your personal information

Full Name setProfile({ ...profile, name: e.target.value })} />

Email setProfile({ ...profile, email: e.target.value })} />

Phone setProfile({ ...profile, phone: e.target.value })} />

Order History View your past orders and their status

{orders.map((order) => (

{order.id}

{order.date}

${order.total}

{order.status}

))}

Saved Addresses Manage your shipping addresses

Home

123 Main St, Apt 4B
New York, NY 10001

) } [V0_FILE]typescriptreact:file="components/wishlist-provider.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { createContext, useContext, useState } from "react" import { toast } from "@/components/ui/use-toast" import type { Product } from "@/lib/products" type WishlistContextType = { wishlistItems: Product[] addToWishlist: (item: Product) => void removeFromWishlist: (id: string) => void isInWishlist: (id: string) => boolean } const WishlistContext = createContext(undefined) export function WishlistProvider({ children }: { children: React.ReactNode }) { const [wishlistItems, setWishlistItems] = useState([]) const addToWishlist = (item: Product) => { setWishlistItems((prev) => { if (prev.find((i) => i.id === item.id)) { return prev } return [...prev, item] }) toast({ title: "Added to wishlist", description: `${item.name} has been added to your wishlist.`, }) } const removeFromWishlist = (id: string) => { setWishlistItems((prev) => prev.filter((item) => item.id !== id)) toast({ title: "Removed from wishlist", description: "Item has been removed from your wishlist.", }) } const isInWishlist = (id: string) => { return wishlistItems.some((item) => item.id === id) } return ( {children} ) } export function useWishlist() { const context = useContext(WishlistContext) if (context === undefined) { throw new Error("useWishlist must be used within a WishlistProvider") } return context } [V0_FILE]typescriptreact:file="app/wishlist/page.tsx" isMerged="true" "use client" import { SiteHeader } from "@/components/site-header" import { useWishlist } from "@/components/wishlist-provider" import { useCart } from "@/components/cart-provider" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter } from "@/components/ui/card" import Image from "next/image" import { ShoppingCart, Trash2 } from "lucide-react" export default function WishlistPage() { const { wishlistItems, removeFromWishlist } = useWishlist() const { addToCart } = useCart() return (

My Wishlist

{wishlistItems.length === 0 ? (

Your wishlist is empty

) : (

{wishlistItems.map((item) => (

{item.name}

${item.price.toFixed(2)}

))}

)}

) } [V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true" "use client" import { useState } from "react" import { SiteHeader } from "@/components/site-header" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { products } from "@/lib/products" import { Download, Plus } from "lucide-react" import * as XLSX from "xlsx" export default function AdminPage() { const [searchTerm, setSearchTerm] = useState("") const filteredProducts = products.filter( (product) => product.name.toLowerCase().includes(searchTerm.toLowerCase()) || product.category.toLowerCase().includes(searchTerm.toLowerCase()), ) const exportToExcel = () => { const worksheet = XLSX.utils.json_to_sheet(products) const workbook = XLSX.utils.book_new() XLSX.utils.book_append_sheet(workbook, worksheet, "Products") XLSX.writeFile(workbook, "products.xlsx") } return (

Admin Dashboard

Products Analytics Orders Product Management Manage your store products

Search Products setSearchTerm(e.target.value)} />

Name Category Price Status Actions {filteredProducts.map((product) => ( {product.name} {product.category} ${product.price} {product.isSale ? "On Sale" : "Regular"} {product.isTopSeller && ", Top Seller"} ))}

Analytics View your store analytics

Total Sales

$12,345

Orders

123

Customers

456

Recent Orders View and manage orders

Order ID Customer Status Total Actions #1234 John Doe Processing $99.99

) } [V0_FILE]typescriptreact:file="app/category/top-sellers/page.tsx" isMerged="true" import { SiteHeader } from "@/components/site-header" import { ProductCard } from "@/components/product-card" import { getTopSellers } from "@/lib/products" export default function TopSellersPage() { const products = getTopSellers() return (

Top Sellers

{products.length === 0 ? (

No top selling products found.

) : (

{products.map((product) => ( ))}

)}

) } [V0_FILE]typescriptreact:file="app/auth/login/page.tsx" import { LoginForm } from "@/components/auth/login-form" import { SiteHeader } from "@/components/site-header" export default function LoginPage() { return (

) } [V0_FILE]typescriptreact:file="app/auth/register/page.tsx" import { RegisterForm } from "@/components/auth/register-form" import { SiteHeader } from "@/components/site-header" export default function RegisterPage() { return (

) } [V0_FILE]typescriptreact:file="app/order-tracking/page.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { SiteHeader } from "@/components/site-header" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Package2, CheckCircle2, Truck, MapPin } from "lucide-react" export default function OrderTrackingPage() { const [orderNumber, setOrderNumber] = useState("") const [isTracking, setIsTracking] = useState(false) const handleTrack = (e: React.FormEvent) => { e.preventDefault() setIsTracking(true) } return (

Track Your Order Enter your order number to track your package {isTracking && (

Order Confirmed

Your order has been confirmed

Processing

Your order is being processed

In Transit

Pending

Delivered

Pending

)}

) }

About

Tags

Share

About

Tags

Share

More from skirfan29

More Templates Like This

About

Tags

Share

About

Tags

Share

More from skirfan29

More Templates Like This